<template>
  <div id="app">
    <navigation>
      <router-view v-if="isReloadAlive"></router-view>
    </navigation>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isReloadAlive: true
    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        let lang = localStorage.getItem('lang')
        if (lang) {
          this.$i18n.locale = lang
        } else {
          this.$i18n.locale = 'en'
          localStorage.setItem('lang', this.$i18n.locale)
        }
      }
    }
  },
  created() {
    this.requstWs()
  },
  mounted() {
    document.documentElement.addEventListener(
      'touchstart',
      function (event) {
        if (event.touches.length > 1) {
          event.preventDefault()
        }
      },
      { passive: false }
    )
    // 禁止双击放大
    let lastTouchEnd = 0
    document.documentElement.addEventListener(
      'touchend',
      function (event) {
        var now = Date.now()
        if (now - lastTouchEnd <= 300) {
          event.preventDefault()
        }
        lastTouchEnd = now
      },
      { passive: false }
    )
  },
  methods: {
    reload() {
      this.isReloadAlive = false
      this.$nextTick(function () {
        this.isReloadAlive = true
      })
    },
    // ws请求
    requstWs() {
      this.$websocket.dispatch('webSocketInit', process.env.WEB_SOCKET_ROOT)
    }
  }
}
</script>
